<template>
<button
  class="d-button"
  @click="$emit('click')"
  :class="[
    { 'is-text': props.text, 'not-text': !props.text },
    `is-${props.type}`
  ]"
>
  <slot></slot>
</button>
</template>

<script setup lang="ts">
import {DButtonProps} from "@/components/DButton/dButton";

defineOptions({ name: 'DButton'})

const props = defineProps(DButtonProps)
const $emit = defineEmits(['click'])

</script>

<style scoped lang="scss">
.is-primary.not-text {
  background-color: var(--primary-color);
  color: #fff;
}

.is-danger.not-text {
  background-color: var(--danger-color);
  color: #fff;
}

.is-warning.not-text {
  background-color: var(--warning-color);
  color: #fff;
}

.is-success.not-text {
  background-color: var(--success-color);
  color: #fff;
}

.is-info.not-text {
  background-color: var(--info-color);
  color: #fff;
}

.is-white.not-text {
  border: 1px solid rgba(0,0,0,.2);
  background-color: #fff;
  color: #000;
}

.is-text {
  background-color: transparent;

  &::after {
    border: none !important;
  }
}

.is-primary.is-text {
  color: var(--primary-color);
}

.is-success.is-text {
  color: var(--success-color);
}

.is-danger.is-text {
  color: var(--danger-color);
}

.is-warning.is-text {
  color: var(--warning-color);
}

.is-info.is-text {
  color: var(--info-color);
}

.is-white.is-text {
  color: #000;
}
</style>
